<style lang="scss" scoped>
</style>

<template>
  <common-page-template
    v-bind="pageData"
    :columns="columns"
    @page-change="pageChange"
  >
    <template #search>
      <agent-search @submit="handleSubmit" />
    </template>
    <template #btns>
      <el-button @click="showModal('add')" type="primary">新增</el-button>
      <!-- <el-button type="danger">删除</el-button> -->
    </template>
    <agent-modal
      width="900px"
      title="关联媒体"
      :agencyId="agencyId"
      v-model:show="showAgent"
    />
    <add-agent-modal
      width="520px"
      :title="optType === 'add' ? '新增代理' : '编辑代理'"
      :type="optType"
      :curForm="curForm"
      v-model:show="showAddModal"
      @success="handleSubmit"
    />
  </common-page-template>
</template>

<script setup>
import { ref, h, onMounted } from "vue";
import AddAgentModal from "@/views/AccountAssociation/componet/addAgentModal.vue";
import AgentSearch from "./componet/AgentSearch.vue";
import CommonStatus from "@/components/commonStatus.vue";
import CommonOptionBtns from "@/components/commonOptionBtns.vue";
import { RoleDelete } from "@/apis/role";
import { RoleStatusMap } from '@/enums/index'
import { formateTime } from "@/utils/time";
import usePage from "@/hooks/usePage";
import { PageAgency, DelAgency } from '@/apis/agent'
import { ElMessage } from "element-plus";
import AgentModal from './componet/agentModal/index.vue'
const { pageData, handleQuery, pageChange } = usePage(
  PageAgency,
  "records"
);
const showAgent = ref(false)
// 是否显示新增弹窗
const showAddAgentModal = ref(false);
const columns = [
  {
    prop: "id",
    label: "代理ID",
    width: 120,
    align: "center",
  },
  {
    prop: "agencyName",
    label: "代理名称",
    minWidth: 120,
    align: "center",
  },
  {
    prop: "rate",
    label: "返点",
    minWidth: 120,
    align: "center",
    render: row => {
      return h('span', (row.rate || 0) * 100 + '%')
    }
  },
  {
    label: "状态",
    width: 120,
    align: "center",
    render: (row) => {
      return h(CommonStatus, { ...(RoleStatusMap[row.state] || {}) });
    },
  },
  {
    label: "创建时间",
    minWidth: 120,
    align: "center",
    render: (row) => {
        return h('span', formateTime(row.createdTime))
    },
  },
  {
    label: "操作",
    width: 250,
    align: "center",
    render: (row, column, $index) => {
      return h(CommonOptionBtns, {
        btnList: [
          { type: "primary", size: "small", text: "编辑", eventName: "edit" },
          // {
          //   type: "warning",
          //   size: "small",
          //   text: "查看媒体",
          //   eventName: "edit",
          // },
          {
            type: "danger",
            size: "small",
            text: "关联媒体",
            eventName: "agent",
          },
          {
            type: "info",
            size: "small",
            text: "删除",
            eventName: "del",
            prop: { title: "确认删除该代理?" },
          },
        ],
        onBtnClick: (eventName) => {
          if (eventName === "edit") {
            // 编辑
            showModal("edit", row);
          }
          if (eventName === 'agent') {
            agencyId.value = row.id
            console.log('row.id: ', row.id);
            showAgent.value = true
          }
          if (eventName === "del") {
            console.log("eventName: ", eventName);
            DelAgency(row.id).then(() => {
              ElMessage({
                message: "删除成功",
                type: "success",
              });
              handleSubmit();
            });
          }
        },
      });
    },
  },
];
const handleSubmit = (formData) => {
  pageData.formData = formData;
  handleQuery();
};
onMounted(() => {
  handleQuery();
});
const agencyId = ref('')
const optType = ref("add");
const curForm = ref("");
const showAddModal = ref(false);
const showModal = (type = 'add', forms = "") => {
  optType.value = type;
  showAddModal.value = true;
  if (!forms) {
    curForm.value = ''
    return 
  } 
  curForm.value = {
    ...forms, 
    state: forms.state || 1,
    times: [forms.beginTime, forms.endTime],
    rate: forms.rate * 100
  };
}
</script>

